<template>
<div class="page" style="overflow:auto;">
<!--header-->
  <div class="pt-header">
    <h1 class="header-logo"><a href="#" title="猴趣乐">LOGO</a> </h1>  
  </div>
<!--slide-->
  <div class="slide">  
    <div class="slideshow">  
      <ul>
      <transition-group tag="ul" name="image">  
        <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">  
          <a href="#">  
            <img :src='img'>  
          </a>  
        </li> 
        </transition-group>  
      </ul>  
    </div>  
    <div class="bar">  
      <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" @click="change(index)" :key="index"></span>  
    </div>  
  </div>  
<!--list-->
<div class="loadmore" ref="lists">

    <ul class="ul">
      <li class="list" v-for="(item,index) in list">
        <div class="list-left">{{index + 1}}</div>
        <div class="list-center">
          <div class="msg">{{item.title}}</div>
          <div class="time">时间：{{item.create_at}}</div>
          <div class="author">作者：{{item.author.loginname}}</div>
        </div>
      </li>
    </ul>

    <div class="loadmore-icon">加载更多<i class="fa fa-cog fa-spin"></i></div>
    <div class="loading" v-show="showlaoding">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
    </div>

  </div>
<!--list-->
 </div> 
</template>

<script>
  import {
    XButton,
    XTable,
    Popup,
    TransferDom,
    Spinner
  } from 'vux'
  import empty from './common/empty.vue';
  import Help from './common/help.vue';
  import InfiniteLoading from 'vue-infinite-loading';
  import {
    clearInterval
  } from 'timers';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Popup,
      empty,
      InfiniteLoading,
      Spinner,
      Help
    },
    name: 'loadmore2',
    data() {
      return {
        
        websocket: null,
        showCoinType: false,
        wsData: null,
        cName: 'XRP',
        volume: '0',
        balance: [],
        current: 1,
        records: [],
        hearBeat: null,
        mark: 0, //比对图片索引的变量 
        imgArray: [  
        '/static/timg1.jpg',  
        '/static/timg2.jpg',  
        '/static/timg1.jpg',  
        '/static/timg2.jpg'  
      ],
      list: [],//数据
      page: 1,//页码
      showlaoding: true //是否显示loading效果 
      }
    },
    computed: {
      amount() {
        return (this.params.price * this.params.num).toFixed(2)
      }
    },
    
    beforeDestroy() {
      
    },
    created () { 
     
    this.play()

  },
    methods: {
      autoPlay () {  
      this.mark++;  
      if (this.mark === 4) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 2500)  
    },  
    change (i) {  
      this.mark = i  
    },
    stop () {  
      clearInterval(this.timer)  
    },  
    move () {  
      this.timer = setInterval(this.autoPlay, 2500)  
    },  
      changeType(type) {
        this.params.tType = type
      },
      getData(page) {
        this.showlaoding = true
        axios.get('https://cnodejs.org/api/v1/topics', {
          params: {
            page: page,
            limit: 10
          }
        })
          .then((res) => {
            if (res.status == 200) {
              let list = res.data.data
              list.map(n => this.list.push(n))
              this.list.forEach(n => {
                const d = new Date(n.create_at)
                n.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
              })
              this.showlaoding = false

            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      

    },
    
    mounted() {
      this.getData(this.page);
      console.log(1);

      
      const $lists = this.$refs.lists;
      console.log(3);
      $lists.addEventListener('scroll', () => {
      console.log(2);
        if($lists.scrollTop + document.body.clientHeight >= $lists.scrollHeight){
          this.getData(this.page += 1);
        }
      })


    }
  }

</script>

<style lang="scss" scoped>
  .pt-header {
   min-height: 44px;
  height: 44px; 
  line-height: 40px;  
  position: relative; 
  background-color: #fff; 
  overflow: hidden; 
  }
  .header-logo { position: absolute; left: 1rem; bottom: .7rem; background-size: 180px 180px; background-position: 0 -142px; height: 28px; width: 260px;}
  .header-logo a { 
  display: inline-block; 
  background-size: 16rem 16rem;
  background-position: 0 -7.6rem;
  height: 100%; 
  width: 17rem; 
  text-indent: -9999px;
  background: url(/static/logo1.png) no-repeat; 
  }
   .slide {  
    width: 100%;  
    height: 207px;  
    margin: 0 auto;  
    overflow: hidden;  
    position: relative;  
  }  
  .slideshow {  
    width: 100%;  
    height: 207px;   
  }  
  li {  
    width:100%;
    position: absolute;  
  }  
  img {  
    width: 100%;  
    height: 207px;   
  }  
  .bar {  
    position: absolute;  
    width: 100%;  
    bottom: 10px;  
    margin: 0 auto;  
    z-index: 10;  
    text-align: center;  
  }  
  .bar span {  
    width: 20px;  
    height: 5px;  
    border: 1px solid;  
    background: white;  
    display: inline-block;  
    margin-right: 10px;  
  }  
  .active {  
    background: red !important;  
  }
  .image-enter-active {  
    transform: translateX(0);  
    transition: all 1.5s ease;  
  }  
  .image-leave-active {  
    transform: translateX(-100%);  
    transition: all 1.5s ease;  
  }  
  .image-enter {  
    transform: translateX(100%);  
  }  
  .image-leave {  
    transform: translateX(0);  
  }
  .loadmore {
    min-height: 100vh;
    width: 100%;
    padding-top: 0.8rem;
    
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;
    color: #ffffff;
    font-size: 0.32rem;
  }

  .ul {
    width: 100%;

  }

  .list {
    padding: 0.3rem;
    display: flex;
    position: relative;
    &:last-child {
      &:after {
        display: none;
      }
    }
    &:after {
      content: '';
      display: block;
      left: 0.3rem;
      right: 0;
      bottom: 0;
      background-color: #dfdfdf;
      height: 1px;
      width: 100%;
      position: absolute;
    }
    .list-left {
      width: 0.5rem;
    }
    .list-center {
      flex: 1;
      padding-left: 0.2rem;
      margin-right: 0.5rem;
      .msg {
        font-size: 0.3rem;
        font-weight: 900;
      }
      .author {
        margin-top: 0.1rem;
      }
      .time {
        margin-top: 0.1rem;
      }
    }
  }

  .loadmore-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    padding: 0.2rem 0;
     overflow:auto;
  }

  .loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(#000, .3);
    display: flex;
    align-items: center;
    justify-content: center;

  } 
</style>
